import type { PickerValue } from 'antd-mobile/es/components/picker-view'
import type { TrainPlanType } from '../interface'
import type { SearcherParam } from '../components/PlanSearcher'
import { SkeletonParagraphWrap } from '@/components/Common/Skeleton'
import { useFetchPageList } from '@/hooks/useFetchPageList'
import { Empty, InfiniteScroll } from 'antd-mobile'
import MoreLoader from '@/components/Common/MoreLoader'
import styles from './index.module.less'
import PlanCard from '../components/PlanCard'
import PlanSearcher from '../components/PlanSearcher'
import { history } from 'umi'

/** 培训计划 */
const TrainPlan = () => {
    const {
        dataList,
        hasMore,
        loading,
        loadMore,
        updateFilterParams,
    } = useFetchPageList<TrainPlanType.Data>(`/engineer/plan`)

    /** 点击培训计划Item */
    const onClickPlanCard = (item: TrainPlanType.Data) => {
        history.push({
            pathname: '/trainPlan/detail',
            query: { id: String(item.id) },
        })
    }

    /** 搜索结果 */
    const onSearcher = (param: SearcherParam, value: PickerValue[]) => {
        switch (param) {
            case 'time': {
                const [year, division] = value
                updateFilterParams({ year, division })
                break
            }
            case 'state': {
                const [states] = value
                updateFilterParams({ states })
                break
            }
        }
    }

    return (
        <div>
            <PlanSearcher onSearcher={onSearcher} />
            <div className={styles.content}>
                <SkeletonParagraphWrap
                    animated
                    lineCount={10}
                    loading={dataList.length === 0 && loading}
                >
                    {dataList.length > 0 && (
                        <>
                            <div>
                                {dataList.map(item => {
                                    return (
                                        <PlanCard
                                            key={item.id}
                                            item={item}
                                            onClickItem={onClickPlanCard}
                                        />
                                    )
                                })}
                            </div>

                            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                                <MoreLoader hasMore={hasMore} />
                            </InfiniteScroll>
                        </>
                    )}

                    {dataList.length === 0 && <Empty description="暂无数据" />}
                </SkeletonParagraphWrap>
            </div>
        </div>
    )
}

export default TrainPlan
